import React,{Component} from 'react';
import { getGoodsCatalogs } from 'api/good.js';
import './classify.scss';
export default class Classify extends Component{
	constructor (props) {
    super(props)
    this.state = {
      html: [[]],
      nowIndex: 0,
      title:['全部分类'],
      cat_id:'',
      cat_name:''
    }
  }
  _getGoodsCatalogs (id, name, nowIndex) {//商品分类接口
    getGoodsCatalogs({
      parent_id:id
    }).then( res => {
      if(res.code === 1) {
        let html = this.state.html
        let title = this.state.title
        html[nowIndex] = res.data
        title[nowIndex] = name
        this.setState({
          html: html,
          title: title,
          nowIndex: nowIndex,
          cat_name: name
        })
      } else {
        if (res.message === '数据为空！') {
          this.props.history.push({
            pathname: '/classifyProductbig',
            state: {
              id: id,
              cat_name:name
            }
          })
        }
      }
    })
  }
  goBack () { //返回到首页
    if (this.state.nowIndex === 0) {
      this.props.history.push('/')
    } else {
      this.setState({
        nowIndex: this.state.nowIndex - 1
      })
    }
  }
  componentDidMount () {
    this._getGoodsCatalogs(0, this.state.title[0], 0)
  }
	render() {
		return (
			<div className="fl">
        <span className="glyphicon glyphicon-back back" onClick={this.goBack.bind(this)}></span>
				<p>{this.state.title[this.state.nowIndex]}</p>
				<ul>
					{
            this.state.html[this.state.nowIndex].map((item, i) => {
              return <li key={i} onClick={this._getGoodsCatalogs.bind(this,item.cat_id, item.cat_name, this.state.nowIndex + 1)}>{item.cat_name}{
                this.state.nowIndex !== 2 ? <span className="glyphicon glyphicon-right"></span> : ''
              }</li>
            })
          }
				</ul>
        <div className="fill"></div>
			</div>
		)
	}
}
